<template>
	<div class="login">
    <alert v-model="msg"></alert>
		<form class="form-signin" @submit.prevent="login">
			<h2 class="form-signin-heading">Please sign in</h2>
			<input type="text" class="form-control" v-model="username" 
                placeholder="Email address" required>
			<input type="password" class="form-control" v-model="password" 
                placeholder="Password" required>
			
      <button class="btn btn-lg btn-primary btn-block" 
              type="submit">Sign in</button>
		</form>

	</div>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import Alert from 'components/Alert.vue'

    export default {
    name: 'login', // global id
        data () {
        	return {
                username: 'dingq',
                password: 'dingq',
                msg: '',
        	}
        },
        computed: {
            ...mapGetters('user', [
                'logged',
            ]),
        },
        methods: {
            login() {
                let _this = this;
                let username = this.username;
                let password = this.password;

                _this.msg = '';

                let p = this.$store
                    .dispatch(
                        'pages/login/login',
                        { username, password }
                    )
                    .done((data, status) => {
                        _this.msg = data.message;
                        if (_this.logged) {
                            if (_this.$route.query.redirect) {
                              _this.$router.push({ path: _this.$route.query.redirect });
                            }
                            else 
                              _this.$router.push({ name: 'index' });
                        }
                    })
                    .fail((data, status) => {
                        _this.msg = 'Network Error';
                    })
            },
        },
        components: {
          Alert,
        },
        created(){
          let redirect = this.$route.query.redirect;
          if (this.$route.query.redirect){
            this.msg = 'Please login first ~~~';
          }
        },
    }
</script>

<style scoped>
  .login {
    /*background-color: #eee;*/
    width: 100%;
    height: 100%;
  }

  .form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
  }
  .form-signin .form-signin-heading,
  .form-signin .checkbox {
    margin-bottom: 10px;
  }
  .form-signin .checkbox {
    font-weight: normal;
  }
  .form-signin .form-control {
    position: relative;
    height: auto;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
  }
  .form-signin .form-control:focus {
    z-index: 2;
  }
  .form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

</style>
